import React, { useState, useEffect, useContext } from "react";

import styles from "./style.module.scss";
import Toggle from "../toggle";
import Name from "../name";
import Messages from "../messages";
import Chat from "../chat";
import GroupInfo from "../groupInfo";
import { HomeContext } from "../context";

export default function Room(props) {
    const {
        administrator,
        chatId,
        createdAt,
        groupId,
        manager,
        members,
        message,
        name,
        read,
        remark,
        sponsor,
        privateId,
        state,
        status,
        type,
        up,
        to,
    } = props;
    const { active, user } = useContext(HomeContext);
    const { uuid } = user;
    return (
        <Toggle active={chatId === active}>
            <div className={styles.content}>
                <Name name={remark} />
                <div className={styles.board}>
                    <div className={styles.main}>
                        <Messages {...{ chatId, message, uuid }} />
                        <Chat
                            {...{
                                chatId,
                                uuid,
                                to,
                                type,
                                remark,
                                members,
                            }}
                        />
                    </div>
                    {["0", "2"].includes(type) && (
                        <GroupInfo
                            {...{ members }}
                            userId={uuid}
                        />
                    )}
                </div>
            </div>
        </Toggle>
    );
}
